<template>
    <div class="order">
        <div class="container">
            <div class="nav-bar">
                <div class="list f14">
                    <div class="item" v-for="(item) in orderBar" @click="selectIndex(item)">
                        <span :class="{ active: item.path == activeIndex }">{{ item.title }}</span>
                        <div class="line" :class="{ active: item.path == activeIndex }"></div>
                    </div>
                </div>
            </div>
        </div>
        <van-list class="order-list bg" :style="{ height: contentHeight + 'px' }" v-if="listData.length"
            v-model="loading" :finished="finished" @load="onLoad">
            <Card v-for="(item) in listData" :key="item.id" :item="item"></Card>
        </van-list>
        <div class="noData" v-else>
            <img src="@/assets/images/noGoods.jpg">
            <div class="info">
                <span class="title f12">还没有相关订单</span>
                <span class="btn f14" @click="goHome">去逛逛</span>
            </div>
        </div>
        <loading v-show="loading"></loading>
    </div>
</template>
<script>
import { List } from 'vant';
import orderBar from "@/common/orderBar";
import Card from "@/components/Order/Card.vue"
export default {
    name: "OrderView",
    components: {
        [List.name]: List,
        Card
    },
    data() {
        return {
            orderBar,
            navNarNode: null,
            itemNodes: null,
            activeIndex: 1,
            activeId: 0,
            loading: false,
            finished: false,
            listData: [],
            nodeLength: 0,
            contentHeight: 0,
            page: 1,
            pageSize: 10,
        }
    },
    created() {
        this.correctActiveIndexAndId();
        this.onLoad();
    },
    mounted() {
        this.orderInitChange();
        this.correctMarginLeft();
    },
    methods: {
        cleanData() {
            this.listData.splice(0);
            this.finished = false;
            this.page = 1;
        },
        selectIndex(item) {
            if (this.activeIndex === item.path || this.loading) return;
            this.activeIndex = item.path;
            localStorage.setItem("activeIndex", this.activeIndex);
            this.activeId = item.id;
            this.cleanData();
            this.correctMarginLeft();
            this.onLoad();
        },
        onLoad() {
            const data = {
                page: this.page,
                pageSize: this.pageSize,
                order_status: this.activeId,
            }
            this.loading = true;
            this.$sendPost("Order/orderList", data)
                .then(res => {
                    if (res.data.status === 200) {
                        const { data } = res.data.data;
                        this.listData.push(...data);
                        this.page++;
                        if (data.length < this.pageSize) this.finished = true;
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
        },
        goHome() {
            this.$router.push({ name: "home" })
        },
        correctActiveIndexAndId() {
            const path =
                this.$route.params.path ||
                localStorage.getItem("activeIndex") || 1;
            this.activeIndex = path;
            localStorage.setItem("activeIndex", path);
            const item = this.orderBar.find(item => item.path == path);
            this.activeId = item.id;
        },
        correctMarginLeft() {
            const itemNode = this.itemNodes[this.activeIndex - 1];
            if (itemNode) {
                const offsetLeft = itemNode.offsetLeft;
                let marginLeft = 0;
                if (this.activeIndex <= this.nodeLength * 0.3) {
                    marginLeft = 0;
                } else if (this.activeIndex > this.nodeLength * 0.3 && this.activeIndex < this.nodeLength * 0.8) {
                    marginLeft = offsetLeft / 2;
                } else {
                    marginLeft = offsetLeft * 1.4;
                }
                this.navNarNode.scrollLeft = marginLeft;
            }
        },
        orderInitChange() {
            this.itemNodes = document.querySelectorAll(".item");
            this.navNarNode = document.querySelector(".nav-bar");
            const headHeight = document.querySelector(".container").clientHeight;
            this.contentHeight = localStorage.getItem("windowHeight") - headHeight;
            this.nodeLength = this.itemNodes.length;
        },
    },
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
    display: none
}


/* IE10+ */
::-webkit-scrollbar {
    display: none;
    /* ChromeSafari */
}

.order {
    .container {
        padding: 10px;
        padding-bottom: 0;

        .nav-bar {
            overflow-x: scroll;
            padding-top: 10px;
            scrollbar-width: none;
            -ms-overflow-style: none;

            .list {
                display: flex;

                .item {
                    padding: 7px 10px;
                    flex-shrink: 0;
                    display: inline-block;
                    position: relative;
                    padding-bottom: 15px;

                    span {
                        &.active {
                            font-weight: bold;
                            color: red;
                        }
                    }

                    .line {
                        position: absolute;
                        height: 2px;
                        width: 80%;
                        left: 50%;
                        bottom: 0;
                        background-color: red;
                        transition: all .4s;
                        transform: translateX(-50%) scale(0);
                        transform-origin: center center;

                        &.active {
                            transform: translateX(-50%) scale(1);
                        }
                    }
                }
            }
        }
    }

    .order-list {
        padding: 15px;
        background-color: #f7f7f7;
        overflow-y: scroll;
    }

    .noData {
        img {
            width: 100%;
        }

        .info {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;

            .title {
                color: #9b9b9b;
            }

            .btn {
                margin-top: 20px;
                color: white;
                background-color: #f62221;
                border-radius: 15px;
                padding: 5px 15px;
            }
        }
    }
}
</style>